<template>
  <div>
    <div class="chartMain">
      <template v-if="dataArr&&dataArr.length">
        <div class="h100" ref="line_echartDom"></div>
        <div class="regionLineResult" v-if="dataArr&&dataArr.length">
          <div class="rangeDesItem" v-for="(item, index) in dataArr" :key="index">
            <div class="rangeIcon" :style="'background:'+currentColorset[index]"></div>
            <div class="rangeValue">{{ item.value + "%" }}</div>
            <div class="rangeKey">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="regionLineDesc">
        </div>
      </template>
      <el-empty class="empty" description="暂无数据" v-else><el-button type="primary" size="mini" @click="handleKnowClick()"> 想要了解 </el-button>
      </el-empty>
    </div>
  </div>
  </div>
</template>

<script>
import multipleRegoinSearch from "@/views/position/components/multipleRegoinSearch.vue";
import { reportLackDataPosition } from "@/api/salary";
export default {
  name: "pieChart",
  components: {
    multipleRegoinSearch,
  },
  props: {
    // 图表数据，结构如下：
    // {
    //     descValue: "5034.14",
    //     maxRateRange: "4500-6000",
    //     maxRate: "48",
    //     list: [
    //       { rankCount: 28796, rankRate: "48", salaryRank: "4.5-6K" },
    //       { rankCount: 27478, rankRate: "46", salaryRank: "3-4.5K" },
    //       { rankCount: 3384, rankRate: "6", salaryRank: "6-8K" },
    //     ],
    //   }
    layerId: {      // 图层id
      type: String,
      default: "194",
    },
    chartData: {
      type: Object,
      default: () => {},
    },
    colorsetIndex: {
      type: String,
      default: "0",
    },
  },
  watch: {
    chartData: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        // //console.log("newValue", newValue);
        if (newValue.list && newValue.list.length) {
          this.dataArr = newValue.list;
          this.$nextTick(() => {
            this.init();
          });
        } else {
          this.dataArr = [];
        }
      },
    },
  },
  data() {
    return {
      resData: [],
      dataArr: [],
      chartTitle1: this.$route.query.name + "值最高的区间",
      chartTitle2: "全国" + this.$route.query.name + "平均值约",
      colorsets: [
        [
          "#6115FF",
          "#9544FF",
          "#AF73FF",
          "#CAA1FF",
          "#DAC0FE",
          "#80A8FF",
          "#9FBAF4",
          "#AFCDFF",
          "#79CCB7",
          "#A5DCD4",
        ],
        [
          "#00AE8B",
          "#2FCDAE",
          "#69DBC5",
          "#A0E6D8",
          "#CEF1EC",
          "#D0DBD9",
          "#DFDFDF",
        ],
        [
          "#1D5AFF",
          "#3E87FF",
          "#75A9FD",
          "#A0C3FF",
          "#BADCFF",
          "#D0DBD9",
          "#DFDFDF",
        ],
      ],
      layerParams: {
        "184": "行业学历要求",
        "185": "企业类型学历要求",
        "183": "城市学历要求",
        "192": "学历要求",
        "190": "企业类型工作经验要求",
        "189": "行业工作经验要求",
        "188": "城市工作经验要求",
        "191": "工作经验要求",
      }
    };
  },
  created() {
    this.currentColorset = this.colorsets[this.colorsetIndex];
  },
  methods: {
    init() {
      if (!this.$refs["line_echartDom"]) return;
      this.myChart = this.$echarts.init(this.$refs["line_echartDom"]);
      let option = {
        color: this.currentColorset,
        series: [
          {
            type: "pie",
            label: {
              show: false,
              position: "center",
              // 高亮样式。
              emphasis: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
                fontFamily: "D-DIN-PRO-600-SemiBold",
              },
              formatter: function (params) {
                return (
                  "{a|" + params.value + "%}" + "\n" + "{b|" + params.name + "}"
                );
              },
              rich: {
                a: {
                  color: "#333",
                  fontWeight: "bold",
                  fontSize: 24,
                  height: 40,
                  backgroundColor: "white",
                  fontFamily: "D-DIN-PRO-600-SemiBold",
                },
                b: {
                  color: "#888",
                  fontSize: 14,
                  backgroundColor: "white",
                },
              },
            },
            labelLine: {
              show: false,
            },

            // 高亮样式。
            itemStyle: {
              borderWidth: 0,
              borderColor: "#6638FF",
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: "#6638FF", //6638FF
              emphasis: {
                borderWidth: 1.5,
                borderColor: "rgb(255,255,255,0.8)",
                shadowBlur: 8,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: "rgb(102,56,255,0.6)", //6638FF
              },
            },
            data: this.dataArr,
            radius: ["45%", "70%"],
          },
        ],
      };
      this.myChart.clear();
      option && this.myChart.setOption(option);

      getDefaultSelected(this.myChart);
      function getDefaultSelected(myChart) {
        let index = 0;

        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });
        myChart.on("mouseover", (e) => {
          if (e.dataIndex !== index) {
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: index,
            });
          }
        });
        myChart.on("mouseout", (e) => {
          index = e.dataIndex;
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
        });
      }
      window.addEventListener("resize", () => {
        if (this.myChart) {
          this.myChart.resize();
        }
      });
      this.myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: 1,
      });
    },

    onWorkYearChange(val) {
      this.fetchData();
    },
    handleDateChange(val) {
      if (this.isSetDeaultTime) {
        this.isSetDeaultTime = false;
        return;
      }
      this.pickerMinDate = null;
      this.fetchData();
    },
    onRegionChange(val) {
      this.selectedRegionList = val;
      if (this.isSetDeaultRegion) {
        this.isSetDeaultRegion = false;
        return;
      }
      this.fetchData();
    },
    handleKnowClick() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo')); //OA的userInfo和SaaS登录的userInfo不一样
      const oaId = "";
      if (userInfo && userInfo.user_source_id) {
        oaId = userInfo.user_source_id;
      }
      const params = {
        positionId: this.$route.query.id,
        positionName: this.$route.query.name,
        layerId: this.layerId,
        layerName: this.layerParams[this.layerId] || "",
        personId: localStorage.getItem("personId") || "",
        oaId: oaId,
      };
      reportLackDataPosition(params)
        .then((response) => {
          if (response.code == 200) {
            this.$message.success("已成功提交");
          } else {
            this.$message.error(res.status_desc);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.pink {
  font-weight: bold;
}
.green {
  font-weight: bold;
}
.blue {
  font-weight: bold;
}
.skyBlue {
  font-weight: bold;
}
.brown {
  font-weight: bold;
}
.tinyTitle {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-top: 16px;
  color: #222;
  font-weight: bold;
  margin-bottom: 22px;
  .titleFlag {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: #4880ff;
    margin-right: 12px;
  }
}
.chartMain {
  display: flex;
  align-items: center;
  // justify-content: space-around;
  .empty {
    margin: auto;
    ::v-deep .el-empty__image {
      width: 150px;
    }
  }
}
.regionLineChart {
  display: flex;
  align-items: center;
}
.regionLineResult {
  display: flex;
  flex-wrap: wrap;
  max-width: 400px;
  margin-left: 20px;
  flex: 1;
  /* justify-content: left; */
  justify-content: flex-start;
  // height: 150px;
  background-color: #f3f7ff;
  border-radius: 8px;
  padding: 10px;
  .rangeDesItem {
    display: flex;
    flex-wrap: wrap;
    width: 170px;
    justify-content: flex-start;
    align-items: center;
    margin: 15px 10px;
    // height: 40px;
    .rangeIcon {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      margin-right: 10px;
      // background-color: #0b6eff;
    }
    .rangeKey {
      width: 80px;
      // height: 40px;
      color: #555;
      font-size: 15px;
      // font-weight: bold;
    }
    .rangeValue {
      // display: block;
      width: 60px;
      font-size: 16px;
      // height: 40px;
      color: #555;
      font-weight: bold;
      margin-right: 10px;
      font-family: D-DIN-PRO-600-SemiBold;
    }
  }
  .rangeDesItem:nth-child(1) {
    .rangeIcon {
      background: #6115ff;
    }
  }
  .rangeDesItem:nth-child(2) {
    .rangeIcon {
      background: #9544ff;
    }
  }
  .rangeDesItem:nth-child(3) {
    .rangeIcon {
      background: #af73ff;
    }
  }
  .rangeDesItem:nth-child(4) {
    .rangeIcon {
      background: #caa1ff;
    }
  }
  .rangeDesItem:nth-child(5) {
    .rangeIcon {
      background: #dac0fe;
    }
  }
  .rangeDesItem:nth-child(6) {
    .rangeIcon {
      background: #80a8ff;
    }
  }
  .rangeDesItem:nth-child(7) {
    .rangeIcon {
      background: #9fbaf4;
    }
  }
  .rangeDesItem:nth-child(8) {
    .rangeIcon {
      background: #9fbaf4;
    }
  }
  .rangeDesItem:nth-child(9) {
    .rangeIcon {
      background: #79ccb7;
    }
  }
  .rangeDesItem:nth-child(10) {
    .rangeIcon {
      background: #a5dcd4;
    }
  }
}
.regionLineDesc {
  margin-left: 60px;
  .regionLineDescItem {
    margin-top: 25px;
  }
  .regionLineDescItem:first-of-type {
    margin-top: 0;
  }
}
.descTitle {
  margin-top: 20px;
  color: #555;
  font-size: 16px;
  span {
  }
}
.descNum {
  display: flex;
  align-items: baseline;
  color: #1b78ff;
  font-size: 26px;
  font-weight: bold;
  margin-top: 22px;
  margin-bottom: 22px;
  font-family: D-DIN-PRO-600-SemiBold;
}

.rmb {
  font-size: 18px;
}
.rate {
  margin-left: 20px;
}
.h100 {
  // height: 25vw;
  // width: 30%;
  // width: 30%;
  min-width: 250px;
  min-height: 220px;
}
// ::v-deep .el-date-editor {
//   background: #fafcfe;
//   border-radius: 4px;
//   border: 1px solid #e4edf8;
// }
// ::v-deep .el-form-item:last-of-type {
//   margin-bottom: 0px;
// }
// ::v-deep .el-form-item__label {
//   font-size: 14px;
//   font-family: PingFangSC-Regular, PingFang SC;
//   font-weight: 400;
//   color: #555555;
//   line-height: 22px;
// }
// ::v-deep .el-form-item {
//   margin-bottom: 6px;
// }
// ::v-deep .el-form-item__label-wrap {
//   margin-left: 0px !important;
// }
// .search-container {
//   display: flex;
//   align-items: center;
// }
</style>
